<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WaitMatl</title>

    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>
    

    <script src="../static/js/index.js"></script>
    <!-- dev mock js -->
    <script src="../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <link rel="stylesheet" href="../static/css/electronicFont.css?version=1.0">

</head>

<style>
    * {
        color: white;
    }
    
    body {
        width: 100%;
        height: 100%;
        background-color: #0b0d20;
    }
    
    .navbar {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    
    .card {
        text-align: center;
    }
    
    .list-group>.list-group-item {
        border: 0;
        background-color: transparent;
    }
    
    .wrapper {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    
    thead {
        font-size: 12px;
        background-color: #2f415c;
    }
    
    tbody {
        background-color: #162634;
    }
    
    .el-table {
        font-size: 18px;
        background-color: transparent;
    }
    
    th,
    tr {
        background-color: transparent !important;
    }
    
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #20252c !important;
    }
</style>

<body>

    <div id="app">

        <div class="navbar">
            <div class="card " style="width: 18rem;  background-color: #459e64; ">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <h4>注塑待发料数</h4>
                    </li>
                    <li class="list-group-item">
                        <h2 id="WaitOutMatl_Mold">0</h2>
                    </li>
                </ul>
            </div>
            <div class="card" style="width: 18rem;  background-color: #388376; ">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <h4>组装待发料数</h4>
                    </li>
                    <li class="list-group-item">
                        <h2 id="WaitOutMatl_Pack">0</h2>
                    </li>
                </ul>
            </div>
        </div>
        <div class="wrapper">
            <div style="width: 50%; padding: 0 5px;">
                <el-table :data="WaitMoldDt" height="900" border style="width: 100%;" ref="WaitMoldDt">
                    <el-table-column prop="PMR" align="center" label="申请单号">
                    </el-table-column>
                    <el-table-column prop="GoodsName" align="center" label="材料名称">
                    </el-table-column>
                    <el-table-column prop="QtyApply" align="center" label="申请数量">
                    </el-table-column>
                    <el-table-column prop="Wait" align="center" label="待发数量">
                    </el-table-column>
                </el-table>
            </div>
            <div style="width: 50%; padding: 0 5px;">
                <el-table :data="WaitPackDt" height="900" border style="width: 100%;" ref="WaitPackDt">
                    <el-table-column prop="PAM" align="center" label="申请单号">
                    </el-table-column>
                    <el-table-column prop="GoodsName" align="center" label="材料名称">
                    </el-table-column>
                    <el-table-column prop="QtyApply" align="center" label="申请数">
                    </el-table-column>
                    <el-table-column prop="wait" align="center" label="待发数量">
                    </el-table-column>
                </el-table>
            </div>

        </div>
    </div>

</body>

<script>
    function GetNavDate() {
        // 待发料数量
        GetCodeData("VB21071518461041", "Get", 'number').then(function(res) {
                $('#WaitOutMatl_Mold').text(res.rows[0].Column1)
            }),
            GetCodeData("VB21071519082321", "Get", 'number').then(function(res) {
                $('#WaitOutMatl_Pack').text(res.rows[0].Column1)
            })
    }

    $(
        setTimeout(function() {
            GetNavDate()
        }, 0),
        setInterval(function() {
            GetNavDate()
        }, 1000*60)
    );
    new Vue({
        el: '#app',
        data() {
            return {
                // 产品 
                WaitMoldDt: [],
                WaitPackDt: []
            }

        },
        methods: {
            GetTabelDate(that) {
                //待发材料 注塑
                GetCodeData("VB21071519293140", "Get", "Goods").then(function(res) {
                        that.WaitMoldDt = res.rows
                    }),
                    GetCodeData("VB21071519325020", "Get", "Goods").then(function(res) {
                        that.WaitPackDt = res.rows
                    })
            }
        },

        mounted() {
            TableAotoRoll([this.$refs.WaitPackDt, this.$refs.WaitMoldDt])
            var that = this
            setTimeout(function() {
                that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000*60);
        }
    })
</script>

</html>